<template>
  <!-- 监测结果页面：点击安防异常消防异常环境异常跳转过来的页面（无设计稿， 按照原型效果开发） -->
  <div>
    <div class="container">
      <div class="container-top">
        <div class="back" @click="goBack"></div>
      </div>
      <div class="center borderStyle centerbox relative">
        <div class="title centertitleStyle centerbox title-relative"></div>
        <!-- <OnlieCenter :dataList="dataList" :xAxisData="xAxisData" /> -->
        <div class="echa">
          <v-chart :auto-resize="true" @click="clickEcha" :options="polar" />
        </div>
      </div>
      <div class="head">
        <!-- <OnlieHead /> -->
        <div class="onlie-body">
          <el-form :inline="true" :model="formInline" label-width="1rem">
            <el-row>
              <el-col :span="4">
                <el-form-item label="所属地市:">
                  <el-select v-model="formInline.ssds" placeholder="所属地市" style="width:100%">
                    <el-option
                      v-for="item in queryCitysList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="变电站:">
                  <!-- <el-select v-model="formInline.region" placeholder="变电站">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
                  </el-select>-->
                  <el-input v-model="formInline.bdzName" placeholder="变电站" style="width:100%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="电压等级:">
                  <!-- <el-input v-model="formInline.user"
                  placeholder="输入名称"></el-input>-->
                  <el-select v-model="formInline.dydj" placeholder="电压等级" style="width:100%">
                    <el-option
                      v-for="item in VoltageList"
                       :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="区域/房间:">
                  <el-input v-model="formInline.roomName" placeholder="区域/房间" style="width:100%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="监测类型:">
                  <!-- <el-input v-model="formInline.user" placeholder="监测类型" style="width:100%"></el-input> -->
                  <el-select v-model="formInline.jclxIds" placeholder="监测类型" style="width:100%">
                    <el-option
                      v-for="item in jclxIdsoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" class="btn">
                <el-form-item>
                  <el-button type="primary" @click="initTable">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="bottom borderStyle centerbox relative">
        <div class="title centertitleStyle centerbox title-relative"></div>
        <!-- <OnlieBottom /> -->
        <div class="smart bigTableStyle">
          <div class="smart-container colcenterbox">
            <el-table
            border
              :data="tableData"
              style="width: 100%"
              height="100%"
              @selection-change="handleSelectionChange"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="myIndex" width="80" label="序号" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="SSDSMC" label="所属地市" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="BDZMC" label="变电站" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="DYDJMC" label="电压等级" width="130" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="ROOM" label="区域/房间" width="130" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="JCLXNAME" label="监测类型" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="SBMC" label="测点名称" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="YBJZ" label="阀值" width="80" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="BJNR" label="报警内容" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="BJSJ" label="报警时间" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
          </div>
          <div class="smart-page elPaginationStyle colcenterbox">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pages.page"
              :page-sizes="[10, 20, 50]"
              :page-size="pages.size"
              layout=" total, prev, pager, next, sizes,jumper"
              :total="pages.totalSize"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Component, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import qs from 'qs'
import { publicAPIModule } from "@/store/modules/public";
// import OnlieHead from "./modules/OnlieHead/index.vue";
// import OnlieCenter from "./modules/OnlieCenter/index.vue";
// import OnlieBottom from "./modules/OnlieBottom/index.vue";
interface tableDataList {
  index: number;
  region: string;
  alarmPowerStation: string;
  alarmEquipment: string;
  alarmTemp: string;
}
interface objType {
  row: object;
  rowIndex: number;
}
@Component({
  components: {
    // OnlieHead,
    // OnlieCenter,
    // OnlieBottom
  },
})
export default class Onlie extends Vue {
  jclxIdsoptions=[
     { value: "",label: "全部"},
     { value: "041001,041002,041004,042008",label: "环境"},
     { value: "042011,042009",label: "消防"},
     { value: "042002,042001",label: "安防"},
     { value: "041001",label: "温度"},
     { value: "041002",label: "湿度"},
     { value: "041004",label: "SF6含量"},
     { value: "042008",label: "水浸"},
     { value: "042009",label: "烟感"},
     { value: "042011",label: "烟雾对射"},
     { value: "042001",label: "电子围栏"},
     { value: "042002",label: "红外对射"},
  ]
  private value: string = "";
  private formInline: any = {
    ssds: "",
    bdzName: "",
    dydj: "",
    roomName: "",
    jclxIds: "",
  };
   pages = {
    page: 1,
    size: 20,
    totalSize: 0,
  };
  private onSubmit() {
    // console.log("submit!");
  }
  //传图表得数据
  public xAxisData: any = ["装置总数", "装置异常数"];
  public dataList: any = [
    { name: "温度", early: 0, ids: "041001" },
    { name: "湿度", early: 0, ids: "041002" },
    { name: "SF6含量", early: 0, ids: "041004" },
    { name: "水浸", early: 0, ids: "042008" },
    { name: "烟感", early: 0, ids: "042009" },
    { name: "烟雾对射", early: 0, ids: "042011" },
    { name: "电子围栏", early: 0, ids: "042001" },
    { name: "红外对射", early: 0, ids: "042002" },
  ];

  public polar: Object = {
    title: {
      text: "环\n境\n监\n测",
      textStyle: {
        color: "#fff",
        fontSize: 12,
        rich: {
          a: {
            width: 12,
          },
        },
      },
      left: "20px",
      top: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      right: "2%",
      top: "2%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 14,
      itemHeight: 12,
      // itemGap: 35
    },

    xAxis: {
      type: "category",
      name: "监测\n类型",
      nameTextStyle: {
        color: "#fff",
      },
      data: ["变压器类", "电抗器类", "断路器类", "GIS类", "电容器设备类"],
      axisLine: {
        lineStyle: {
          color: "rgba(115,129,167,0.8)",
        },
      },
      axisLabel: {
        interval: 0,
        // rotate: 40,
        color: "#fff",
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      axisTick: {
        show: false,
      },
    },

    yAxis: {
      type: "value",
      name: "单位（条）",
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {},
      axisTick: {
        show: false,
      },
    },
    // dataZoom: [
    //   {
    //     show: true,
    //     height: 12,
    //     xAxisIndex: [0],
    //     bottom: "5%",
    //     start: 10,
    //     end: 90,
    //     handleIcon:
    //       "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
    //     handleSize: "110%",
    //     handleStyle: {
    //       color: "#d3dee5",
    //     },
    //     backgroundColor: "rgba(5,180,255,0.2)",
    //     fillerColor: "rgba(5,180,255,1)",
    //     textStyle: {
    //       color: "#fff",
    //     },
    //     borderColor: "rgba(5,180,255,0.1)",
    //   },
    //   {
    //     type: "inside",
    //     show: true,
    //     height: 15,

    //     start: 1,
    //     end: 35,
    //   },
    // ],
    series: [
      {
        name: "",
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离\
        label:{
          show:true,
          position:'top',
          textStyle:{
            color:'#fff'
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#38F7F2",
              },
              {
                offset: 1,
                color: "#264C9C",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        data: [400, 500, 500, 500, 500, 400],
      },
    ],
  };

  @Watch("dataList", { immediate: true, deep: true })
  getBarData(dataList: any) {
    var total: any[] = [];
    var early: any[] = [];
    var onLine: any[] = [];
    var xAxisData: any[] = [];
    dataList.map((v: any, i: number) => {
      total[i] = v.total;
      early[i] = v.early;
      onLine[i] = v.onLine;
      xAxisData[i] = v.name;
    });
    (this as any).polar.series[0].data = early;
    (this as any).polar.xAxis.data = xAxisData;
  }
  tableData = [
  ];

  tableSelect: Array<object> = [];
  // 单位列表
  get queryCitysList() {
    let queryCitysList = publicAPIModule.queryCitysList || [];
    return queryCitysList;
  }
  get VoltageList() {
    return publicAPIModule.VoltageList;
  }
  private handleSizeChange(val: number) {
    // console.log(`每页 ${val} 条`);
  }

  private handleCurrentChange(val: number) {
    // console.log(`当前页: ${val}`);
  }

  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);

    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  // 返回按钮
  private goBack(val: string) {
    window.history.back();
    // this.$router.push("index");
  }

  // 初始化数据
  private init() {
    // 上部分图表显示
    (this as any).$services
      .xjzlgetChartData({
        method: "get",
        data: {},
      })
      .then((result: any) => {
        console.log("上部分图表显示:", result);
        if (result.data.jclx&&result.data.jclx.length>0) {
        result.data.jclx.map(it=>{
          this.dataList.map(t=>{
            if (it.JCLX==t.ids) {
              t.early=it.VALUE
            }
          })
        })
          console.log(this.dataList);
          
        }
        // this.reportData = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
    
  }
initTable(){
  // 下部分表格展示
  this.formInline.rows=this.pages.size;
  this.formInline.page=this.pages.page;
    (this as any).$services
      .getHjjcDetail({
        method: "get",
        data:this.formInline,
      })
      .then((result: any) => {
        // console.log("下部分表格展示:", result);
        let page = this.pages.page;
      let size = this.pages.size;
        this.tableData = result.data.rows.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
      })
      .catch((err: object) => {
        console.log(err);
      });
}
//点击图表
clickEcha(val){
  var jclx= this.dataList.filter(it=>{
    return it.name==val.name
  })
console.log(jclx);
this.formInline.jclxIds=jclx[0].ids
this.initTable()
}
  mounted() {
    this.formInline.jclxIds=this.$route.query.jclx
    this.init();
    this.initTable()
  }
}
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0.24rem 0.24rem 0.24rem;
  // background-color: pink;
  &-top {
    width: 100%;
    // height: 2%;
    // background-color: pink;
    display: flex;
    align-items: center;
    .back {
      width: 0.9rem;
      height: 0.31rem;
      margin-left: auto;
      background-image: url("../../../../assets/img/return.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  .head {
    width: 100%;
    height: 5%;
    // background-color: grey;
    // margin-bottom: 0.29rem;
  }
  .center {
    width: 100%;
    height: 26%;
    // background-color: pink;
    // margin-bottom: 0.38rem;
    .echa {
      width: 100%;
      height: 100%;
      .echarts {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 60%;
    // background-color: rgb(179, 245, 177);
    .smart {
      width: 100%;
      height: 100%;
      padding: 2% 2% 0 2%;
      &-container {
        width: 100%;
        height: 90%;
      }
      &-page {
        width: 100%;
        height: 10%;
      }
    }
  }
}
</style>
<style lang="scss">
.onlie-body {
  .el-form-item {
    margin-bottom: 0.1rem;
  }
  .el-form--inline .el-form-item__content {
    width: 55%;
  }
}
</style>